<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>熙心健康体检系统</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
      height: 100%;
      font-family: 'Microsoft YaHei', sans-serif;
      background-color: #f5f7fa;
    }

    .container {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 20px;
    }

    .tabs {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }

    .tab {
      padding: 10px 16px;
      background: #fff;
      border-radius: 5px;
      border: 1px solid #dcdfe6;
      cursor: pointer;
    }

    .tab.active {
      background-color: #409EFF;
      color: white;
    }

    .stat-cards {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
      height: 18vh;
    }

    .stat-card {
      flex: 1;
      background: linear-gradient(to right, #83a4d4, #b6fbff);
      color: #333;
      border-radius: 10px;
      padding: 16px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2em;
    }

    .chart-row {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
      height: 25vh;
    }

    .chart-box, .chart-full {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      padding: 10px;
    }

    .chart-box {
      flex: 1;
      height: 100%;
    }

    .chart-full {
      width: 100%;
      height: 35vh;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="tabs">
      <div class="tab active">首页</div>
      <div class="tab">Config</div>
      <div class="tab">Role</div>
      <div class="tab">Task</div>
    </div>

    <div class="stat-cards">
      <div class="stat-card">网站访问量：12345</div>
      <div class="stat-card">分享次数：678</div>
      <div class="stat-card">预约人数：234</div>
      <div class="stat-card">回访次数：456</div>
      <div class="stat-card">销售额统计：¥98,000</div>
    </div>

    <div class="chart-row">
      <div id="pieChart" class="chart-box"></div>
      <div id="barChart" class="chart-box"></div>
      <div id="radarChart" class="chart-box"></div>
    </div>

    <div id="lineChart" class="chart-full"></div>
  </div>

  <script>
    echarts.init(document.getElementById('pieChart')).setOption({
      title: { text: '用户访问来源', left: 'center' },
      tooltip: { trigger: 'item' },
      legend: { bottom: 10 },
      series: [{
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: { show: false },
        emphasis: {
          label: { show: true, fontSize: '18', fontWeight: 'bold' }
        },
        data: [
          { value: 1048, name: '微信' },
          { value: 735, name: '小程序' },
          { value: 580, name: '官网' },
          { value: 484, name: '线下扫码' }
        ]
      }]
    });

    echarts.init(document.getElementById('barChart')).setOption({
      title: { text: '沈阳各区各季度体检预约人数', left: 'center' },
      tooltip: {},
      legend: { top: 30 },
      xAxis: { data: ['和平区','沈河区','大东区','皇姑区','铁西区','浑南区'] },
      yAxis: {},
      series: [
        { name: '第一季度', type: 'bar', stack: 'total', data: [120, 200, 150, 80, 70, 110] },
        { name: '第二季度', type: 'bar', stack: 'total', data: [180, 250, 130, 100, 90, 140] },
        { name: '第三季度', type: 'bar', stack: 'total', data: [210, 300, 190, 130, 120, 160] },
        { name: '第四季度', type: 'bar', stack: 'total', data: [150, 220, 170, 90, 100, 130] }
      ]
    });

    echarts.init(document.getElementById('radarChart')).setOption({
      title: { text: '体检项目统计', left: 'center' },
      tooltip: {},
      radar: {
        indicator: [
          { name: '血压', max: 6500 },
          { name: '心电图', max: 16000 },
          { name: 'B超', max: 30000 },
          { name: '肝功能', max: 38000 },
          { name: '血糖', max: 52000 },
          { name: '尿常规', max: 25000 }
        ]
      },
      series: [{
        type: 'radar',
        data: [{
          value: [4200, 11800, 26000, 30000, 42000, 21000],
          name: '2024年'
        }]
      }]
    });

    echarts.init(document.getElementById('lineChart')).setOption({
      title: { text: '近三年销售额对比', left: 'center' },
      tooltip: { trigger: 'axis' },
      legend: { top: 30, data: ['2022', '2023', '2024'] },
      xAxis: {
        type: 'category',
        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
      },
      yAxis: { type: 'value' },
      series: [
        { name: '2022', type: 'line', smooth: true, data: [22000, 24000, 18000, 26000, 30000, 28000, 32000, 31000, 33000, 35000, 36000, 40000] },
        { name: '2023', type: 'line', smooth: true, data: [25000, 26000, 20000, 28000, 34000, 32000, 36000, 34000, 37000, 39000, 41000, 43000] },
        { name: '2024', type: 'line', smooth: true, data: [30000, 32000, 28000, 35000, 39000, 37000, 40000, 41000, 43000, 45000, 46000, 48000] }
      ]
    });
  </script>
</body>
</html>
